<!--新建课程界面-->
<template>
  <div>
    <el-menu class="el-menu-demo" background-color="#d9ecff">
      <el-menu-item style="float: left;font-size: 20px;margin-left: 10px">
        <img src="../assets/heima.png" alt="">
        <a style="margin-left: 10px">课程学习与认证管理系统</a>
      </el-menu-item>
      <el-menu-item style="float: right">
        <el-button type="primary" @click="returnLogin">退出登录</el-button>
      </el-menu-item>
    </el-menu>
    <el-row>
      <el-col :span="(!isCollapse)? 4:1" style=";margin-top: 10px">
        <el-menu default-active="2-1" :collapse="isCollapse" :collapse-transition="false">
          <div class="toggle-button" @click="toggleCollage">|||</div>
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title" @click="toCourseManagement">课程管理</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">单元信息</span>
            </template>
            <el-menu-item index="2-1">单元视频</el-menu-item>
            <el-submenu index="2-2">
              <span slot="title">单元测试</span>
              <el-menu-item index="2-2-1" @click="toChoiceQuestion">选择题</el-menu-item>
              <el-menu-item index="2-2-2" @click="toTrueOrFalseQuestion">判断题</el-menu-item>
              <el-menu-item index="2-2-3" @click="toBlankQuestion">填空题</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">课程证书</span>
            </template>
            <el-menu-item index="3-1">暂未开发</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="4-1">暂未开发</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">管理员管理</span>
            </template>
            <el-menu-item index="5-1">暂未开发</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="(!isCollapse)? 19:22" style="margin-top: 10px;" :offset="1">
        <el-row>
          <el-col :span="22" style="margin-top: 20px;margin-left: 5px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item style="font-size: x-large" :to="{ path: 'UnitInformation' ,
              name: 'UnitInformation',
              params: { UnitId: this.file.courseUnitId,courseID: this.courseId }
              }">单元信息
              </el-breadcrumb-item>
              <el-breadcrumb-item style="font-size: x-large">单元测试</el-breadcrumb-item>
              <el-breadcrumb-item style="font-size: x-large">单元视频</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>
        <video style="height: 500px;
                margin-top: 30px"
               align="center" controls src="http://localhost:8088/video/get?courseUnitId=1"> </video>
<!--        <div class="container">-->
<!--          <video-player-->
<!--            class="video-player vjs-custom-skin"-->
<!--            ref="videoPlayer"-->
<!--            :playsinline="true"-->
<!--            :options="playerOptions"-->
<!--          ></video-player>-->
<!--        </div>-->
        <div style="position: fixed;right: 80px; bottom: 50px">
          <el-button class="circle_button" type="primary" @click="dialogFormVisible = true">+</el-button>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" >
            <el-form>
              <el-form-item label="视频名称 :" prop="name">
                <el-input maxlength="30" v-model="file.name"></el-input>
              </el-form-item>
              <el-form-item label="视频描述 :" prop="describe">
                <el-input type="textarea" :rows="5" maxlength="300" show-word-limit v-model="file.describe"></el-input>
              </el-form-item>
              <el-form-item prop="Video" label="视频上传 :">
                <input type="file" name="uploadFile" multiple="multiple" class="add-file-right-input"
                       style="margin-left:70px;"/>
              </el-form-item>
            </el-form>
          <div slot="footer"  class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">上传</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { post } from '@/common/serviceUtil'
// import { videoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
const axios = require('axios')
const FormData = require('form-data')
export default {
  name: 'Video',
  data () {
    return {
      // playerOptions: {
      //   playbackRates: [0.7, 1.0, 1.25, 1.5, 2.0], // 播放速度
      //   autoplay: false, // 如果true,浏览器准备好时开始回放。
      //   muted: false, // 默认情况下将会消除任何音频。
      //   loop: false, // 导致视频一结束就重新开始。
      //   preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      //   language: 'zh-CN',
      //   aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      //   fluid: true, // 当true时, player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      //   sources: [
      //     {
      //       type: 'video/mp4', // 类型
      //       src: 'http://localhost:8088/video/get?courseUnitId=1' // url地址
      //     }
      //   ],
      //   poster: '', // 封面地址
      //   notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      //   controlBar: {
      //     timeDivider: true, // 当前时间和持续时间的分隔符
      //     durationDisplay: true, // 显示持续时间
      //     remainingTimeDisplay: false, // 是否显示剩余时间功能
      //     fullscreenToggle: true // 全屏按钮
      //   }
      // },
      VideoSec: '',
      courseId: '',
      file: {
        courseUnitId: '',
        // uploadFile: '', // 文件
        name: '',
        describe: '',
        uploadFile: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入视频名称', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        describe: [
          { required: true, message: '请输入视频描述', trigger: 'blur' },
          { min: 0, max: 300, message: '长度在 0 到 300 个字符', trigger: 'blur' }
        ]
      },
      isCollapse: false,
      dialogTableVisible: false,
      dialogFormVisible: false
    }
  },
  methods: {
    submitForm () {
      const data = new FormData()
      data.append('courseUnitId', this.file.courseUnitId)
      data.append('name', this.file.name)
      data.append('uploadFile', document.querySelector('input[type=file]').files[0])
      const config = {
        method: 'post',
        url: 'http://localhost:8088/video/add',
        data: data
      }
      axios(config)
        .then((response) => {
          console.log(response)
          alert('保存视频成功！')
        })
    }, // 提交视频按钮
    toggleCollage () {
      this.isCollapse = !this.isCollapse
    }, // 导航栏开关
    returnLogin () {
      post('//localhost:8088/admin/logout').then((response) => {
        console.log(response)
        if (response.data.isSuccess) {
          this.$router.push('/Login')
        } else {
          alert('呀！退出失败，请稍后再试！')
        }
      })
    },
    toCourseManagement () {
      this.$router.push('/CourseManagement')
    },
    toChoiceQuestion () {
      this.$router.push({
        name: 'ChoiceQuestion',
        path: '/ChoiceQuestion',
        params: {
          UnitId: this.file.courseUnitId,
          CourseId: this.courseId
        }
      })
    },
    toTrueOrFalseQuestion () {
      this.$router.push({
        name: 'TrueOrFalseQuestions',
        path: '/TrueOrFalseQuestions',
        params: { UnitId: this.file.courseUnitId, courseId: this.courseId }
      })
    },
    toBlankQuestion () {
      this.$router.push({
        name: 'BlankQuestion',
        path: '/BlankQuestion',
        params: { UnitId: this.file.courseUnitId, courseId: this.courseId }
      })
    },
    getVideo () {
      post('//localhost:8088/video/get', this.file).then((response) => {
        console.log(response.data)
      })
    }
  },
  mounted () {
    this.file.courseUnitId = this.$route.params.courseUnitId
    this.courseId = this.$route.params.courseId
    // this.getVideo()
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.toggle-button {
  // 添加背景颜色
  background-color: #4A5064;
  // 设置文本大小
  font-size: 10px;
  // 设置文本行高
  line-height: 24px;
  // 设置文本颜色
  color: #fff;
  // 设置文本居中
  text-align: center;
  // 设置文本间距
  letter-spacing: 0.2em;
  // 设置鼠标悬浮变小手效果
  cursor: pointer;
}

.el-menu-item {
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d9ecff;
  }
}

.circle_button {
  border-radius: 70%;
  font-size: 40px;
  border-color: #3a8ee6;
  background-color: #3a8ee6;
  z-index: 99999;
}
.circle_button{
  border-radius: 70%;
  font-size: 40px;
  border-color: #3a8ee6;
  background-color: #3a8ee6;
  z-index: 99999;
}
</style>
